<!--
 * @description  : 自定义标签维护
 * @descriptionDetail: 自定义标签维护
 * @author       : bln
 * @create       : 2024-05-21 00:00:00
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
      <view class="nav-right-icon">
				<u-icon color="#fff" name="plus" size="38" @click="addTag"></u-icon>
			</view>
    </theme-navbar>
    <!-- #endif -->
    <!-- #ifdef H5-WECHAT || H5-EMP -->
		 <fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <view class="content u-page">
      <me-table :i="0" :top="108" :index="0" :load-data="loadData" :init-load="false" ref="mescrollItem0">
        <view slot-scope="d" class="card">
          <u-swipe-action :index="d.data.tagUuid" :show="d.data.show" :options="options" @open="swiperOpen" @click="swiperClick">
            <u-row>
              <u-col span="3">标签名称：</u-col>
              <u-col span="9">{{ d.data.tagName }}</u-col>
            </u-row>
            <u-row>
              <u-col span="3">标签描述：</u-col>
              <u-col span="9">{{ d.data.tagDesc }}</u-col>
            </u-row>
            <u-row>
              <u-col span="3">标签状态：</u-col>
              <u-col span="9">{{ d.data.isActiveName }}</u-col>
            </u-row>
            <u-row>
              <u-col span="3">创建时间</u-col>
              <u-col span="9">{{ d.data.createTime }}</u-col>
            </u-row>
            <u-row>
              <u-col span="3">所属分组</u-col>
              <u-col span="9">{{ d.data.gpName }}</u-col>
            </u-row>
          </u-swipe-action>
        </view>
      </me-table>
    </view>
    <!-- 标签新增、编辑 -->
    <u-popup closeable mode="bottom" width="100%" height="50%" v-model="tagShow">
      <view class="form-content">
        <view class="title">{{ tagTitle }}</view>
				<u-form :model="tagForm" :rules="tagRules" :errorType="errorType" style="padding: 15px;" ref="tagForm">
					<u-form-item required label="标签名称" prop="tagName" :label-width="180" >
            <u-input v-model="tagForm.tagName" placeholder="请输入标签名称" />
          </u-form-item>
          <u-form-item label="标签描述" prop="tagDesc" :label-width="180" >
            <u-input v-model="tagForm.tagDesc" placeholder="请输入标签描述" />
          </u-form-item>
          <u-form-item required label="标签状态" prop="isActiveName" :label-width="180" >
            <u-input v-model="tagForm.isActiveName" type="select" :select-open="selectActiveShow" placeholder="请选择标签状态" @click="selectActiveShow = true"  />
            <u-select :list="activeList" v-model="selectActiveShow" @confirm="selectActiveConfirm" />
          </u-form-item>
          <u-form-item required label="所属分组" prop="gpName" :label-width="180" >
            <u-input v-model="tagForm.gpName" type="select" :select-open="selectShow" placeholder="请选择所属分组" @click="selectShow = true"  />
            <u-select :list="groupList" v-model="selectShow" @confirm="selectConfirm" />
            <u-button class="u-m-l-20" type="primary" size="mini" @click="groupShow = true">新增分组</u-button>
          </u-form-item>
				</u-form>
				<view class="submit-btns btn-other-cls" style="margin-left:-30rpx">
					<u-button plain class="del" type="primary" @click="tagShow = false">取消</u-button>
					<u-button class="mit" type="primary" @click="saveTag">保存</u-button>
				</view>
			</view>
    </u-popup>
    <!-- 标签组新增 -->
    <u-popup closeable mode="bottom" width="100%" height="50%" v-model="groupShow">
      <view class="form-content">
        <view class="title">标签组新增</view>
				<u-form :model="groupForm" :rules="groupRules" :errorType="errorType" style="padding: 15px;" ref="groupForm">
					<u-form-item required label="分组名称" prop="groupName" :label-width="180" >
            <u-input v-model="groupForm.groupName" placeholder="请输入分组名称" />
          </u-form-item>
          <u-form-item required label="排序" prop="displayOrder" :label-width="180" >
            <u-input v-model="groupForm.displayOrder" placeholder="请输入分组排序"  />
          </u-form-item>
				</u-form>
				<view class="submit-btns btn-other-cls" style="margin-left:-30rpx">
					<u-button plain class="del" type="primary" @click="groupShow = false">取消</u-button>
					<u-button class="mit" type="primary" @click="saveGroup">保存</u-button>
				</view>
			</view>
    </u-popup>
  </view>
</template>

<script>
import meTable from '@/components/me-table.vue'
import checkService from '@/service/check/check.service'
import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js'

export default {
  components: { meTable },
  mixins: [MescrollMoreMixin],
  data() {
    return {
      tagShow: false,
      groupShow: false,
      selectShow: false,
      selectActiveShow: false,
      keyWord: '',
      ruleUid: '',
      tagTitle: '标签新增',
      options: [
        {
          text: '编辑',
          style: { backgroundColor: '#007aff'}
        },
        {
          text: '删除',
          style: { backgroundColor: '#dd524d' }
        }
      ],
      groupList: [], // 标签组列表
      errorType: ['border-bottom', 'message'],
      tagForm: {},
      groupForm: {},
      tagRules: {
        tagName: [
          {
            required: true,
            message: '请输入标签名称',
            trigger: ['change', 'blur']
          }
        ],
        isActiveName: [
          {
            required: true,
            message: '请选择标签状态',
            trigger: ['change', 'blur']
          }
        ],
        gpName: [
          {
            required: true,
            message: '请选择标签分组',
            trigger: ['change', 'blur']
          }
        ]
      },
      groupRules: {
        groupName: [
          {
            required: true,
            message: '请输入分组名称',
            trigger: ['change', 'blur']
          }
        ],
        displayOrder: [
          {
            required: true,
            message: '请输入分组排序',
            trigger: ['change', 'blur']
          }
        ]
      },
      fContent: [{
        active: false,
        text: '新增标签',
        iconPath: require('@/static/add.png'),
        selectedIconPath: require('@/static/add.png')        
      }]
    }
  },
  watch: {
    tagShow(val) {
      this.$nextTick(() => {
        val && this.$refs.tagForm.setRules(this.tagRules)
      })
    },
    groupShow(val) {
      this.$nextTick(() => {
        val && this.$refs.groupForm.setRules(this.groupRules)
      })
    }
  },
  mounted() {
    this.getGroupList()
    this.setRightBtns()
  },
  computed: {
    activeList() {
      return this.$u.dic.getByDictCode('S_SYS_IS_ACTIVE').filter(d => d.bcbCode!=='2').map(v => {
        return {
          value: v.bcbCode,
          label: v.bcbName
        }
      })
    }
  },
  methods: {
    // 标签列表数据
    loadData(page) {
      return checkService.getTagList({ page: page.num, limit: page.size }).then(res => {
        if (res.success) {
          res.data.map(item => {
            item.show = false
            return item
          })
          return res
        }
      })
    },
    setRightBtns() {
      this.$deviceApi.setRight('新增标签', () => {
        this.addTag()
        this.setRightBtns()
      }, true, true)
    },
    fabtrigger(btn) {
      if (btn.index == 0) {
        this.addTag()
      }
    },
    // 列表刷新
    handlerSearch() {
      this.getMescroll(0).triggerDownScroll()
    },
    // index1是数据索引 index是导航索引
    swiperClick(index1, index) {
      if (index === 0) {
        this.tagShow = true
        this.tagTitle = '标签编辑'
        this.tagForm = this.$refs.mescrollItem0.listDatas.find(item => item.tagUuid === index1) || {} 
      } else {
        this.deleteTag(index1)
      }
    },
    // 滑块展示
    swiperOpen(index) {
      this.$refs.mescrollItem0.listDatas.map((val, idx) => {
        this.$refs.mescrollItem0.listDatas[idx].show = index === val.tagUuid
      })
    },
    // 标签新增
    addTag() {
      this.tagShow = true
      this.tagTitle = '标签新增'
      this.tagForm = {}
    },
    // 选择标签分组
    selectConfirm(result) {
      this.tagForm.gpUid = result[0].value
      this.tagForm.gpName = result[0].label
    },
    // 选择标签状态
    selectActiveConfirm (result) {
      this.tagForm.isActive = result[0].value
      this.tagForm.isActiveName = result[0].label
    },
    // 获取标签分组列表
    getGroupList () {
      this.$u.loading('加载中...')
      checkService.getGroupList().then(dr => {
        this.$u.hideLoading()
        if (dr.success) {
          this.ruleUid = dr.bean.ruleUid
          this.groupList = dr.bean.groupList.map(v => {
            return {
              value: v.gpUid,
              label: v.groupName
            }
          })
        }
      }).catch(e => {
        this.$u.hideLoading()
        this.$u.toast(e)
      })
    },
    // 保存标签
    saveTag() {
      this.$refs.tagForm.validate(valid => {
        if (valid) {
          this.$u.loading('加载中...')
          checkService.saveTag({ ...this.tagForm, ruleUid: this.ruleUid }).then(dr => {
            this.$u.hideLoading()
            if (dr.success) {
              this.tagShow = false
              this.$u.toast('保存成功！')
              this.getMescroll(0).triggerDownScroll()
            }
          }).catch((er) => {
            this.$u.hideLoading()
            this.$u.toast(er)
          })
        }
      })
    },
    // 保存标签组
    saveGroup() {
      this.$refs.groupForm.validate(valid => {
        if (valid) {
          this.$u.loading('加载中...')
          checkService.saveTagGroup({
            ...this.groupForm,
            ruleUid: this.ruleUid
          }).then(dr => {
            this.$u.hideLoading()
            if (dr.success) {
              this.groupShow = false
              this.groupList = dr.data.map(v => {
                return {
                  value: v.gpUid,
                  label: v.groupName
                }
              })
              this.$u.toast('保存成功！')
            }
          }).catch((er) => {
            this.$u.hideLoading()
            this.$u.toast(er)
          })
        }
      })
    },
    // 删除标签
    deleteTag(id) {
      this.$modal.confirm('确定要删除吗？', () => {
        this.$u.loading('删除中...')
        checkService.deleteTag({ gpUid: this.tagForm.gpUid, tagUuid: id }).then(dr => {
          this.$u.hideLoading()
          if (dr.success) {
            this.$u.toast('删除成功！')
            this.getMescroll(0).triggerDownScroll()
            this.$forceUpdate()
          }
        }).catch((er) => {
          this.$u.hideLoading()
          this.$u.toast(er)
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  padding: 0;
}
.content {
  background-color: #f3f4f5;
}
.title {
  color: #333;
  font-size: 32rpx;
  font-weight: 700;
}
.form-content {
  padding: 36rpx;
}
.card {
  padding: 20rpx;
}
.u-row {
  padding: 10rpx 0;
}
.u-col-3 {
  color: #717579;
}
.re-subtitle, .rowde {
  padding-top: 5px;
  color: #666;
}
.mescroll-body {
  padding-top: 0px!important;
}
.u-col {
  padding-left: 0px!important;
}
</style>
